import React, { Component } from 'react'
import { Text, View ,TouchableOpacity} from 'react-native'
import Svg from 'react-native-svg-uri'
import {tanhua,near,testSoul} from '../../../soures/fonts/iconSvg'
import { pxToDp } from '../../../utils/stylesKits'
const svgList = [
    {
        svg:tanhua,
        name:'探花',
        backgroundColor:'red'
    },{
        svg:near,
        name:'搜附近',
        backgroundColor:'skyblue'
    },{
        svg:testSoul,
        name:'测灵魂',
        backgroundColor:'#ecc768'
    }
]
export default class FriendHead extends Component {
    render() {
        return (
            <View style={{
                width:'70%',
                flexDirection:'row',
                justifyContent:'space-around'
            }}>
                {
                    svgList.map((item,index)=>{
                        return (
                            <TouchableOpacity 
                                style={{
                                    alignItems:'center',
                                    justifyContent:'center'
                                }}
                                key={index}
                           >
                               <View style={{
                                   width:pxToDp(50),
                                   height:pxToDp(50),
                                   borderRadius:pxToDp(25),
                                   backgroundColor:item.backgroundColor,
                                   alignItems:'center',
                                   justifyContent:'center'
                               }}>
                                   <Svg 
                                       width={pxToDp(25)}
                                       height={pxToDp(25)}
                                       fill='#fff'
                                       svgXmlData={item.svg}
                                   ></Svg>
                               </View> 
                               <Text style={{
                                   fontSize:pxToDp(18),
                                   marginTop:pxToDp(4),
                                   color:'#ffffff9a'
                               }}>{item.name}</Text>
                           </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }
}
